<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" data-dpr="1">
<head
	th:replace="header/h5header::h5header('帅小铺-实体商户社群服务平台',
'/assets/H5/css/tab.css?v=1,/assets/H5/libs/index/dropload.css,/assets/layui/css/layui.css',
'/assets/H5/js/flexible.js,
/assets/H5/libs/index/dropload.min.js
')">
</head>
<body style="font-size: 16px;">
	<div id="main">
		<input type="hidden" th:value="${columnid}" id="colId">
		<div id="indexContainer" class="indexContainer withHeader">
			<header id="indexHeader" class="index--toutiaoribao">
				<div class="top_bar">
					<div class="abs_m">
						<a href="/" class="refresh_title btn"></a>
						<div class="refreshBtn-container ">
							<i class="refresh_btn rotate"></i>
						</div>
					</div>
					<div class="abs_l">
						<a href="/city" class="msg-box layui-elip" style="color: #fff;">
							<i class="layui-icon layui-icon-location" style="margin-right: 0.05rem;"></i>
							<span th:text="${cityname}"></span>
						</a>
					</div>
					<div class="abs_r" style="right: 0.6rem;">
						<a href="/h5search" class="layui-icon layui-icon-search" style="font-size: 0.48rem;color: #ffffff;margin-right: 0.4rem;"></a>
					</div>
					<div class="abs_r" style="right: 0.2rem;">
						<a class="layui-icon layui-icon-username" th:if="${user == null}" href="/login" style="font-size: 0.48rem;color: #ffffff;"></a>
						<a class="layui-icon layui-icon-username" th:if="${user != null}" href="/u/profile" style="font-size: 0.48rem;color: #ffffff;"></a>
					</div>
				</div>
			</header>
			<div>
				<div class="top_menu_bar">
					<div class="top_menu_more">
						<div class="list_shadow"></div>
					</div>
					<div class="top_menu_list">
						<a href="/" th:class="${columnid == 0 ? 'btn cur' : 'btn'}">推荐</a>
						<a th:href="${'/channel/' + item.columnId}" th:each="item,columnStat:${columns}" th:class="${item.columnId == columnid ? 'btn cur' : 'btn'}" th:text="${item.columnName}"></a>
						<a href="/ask" th:class="${columnid == -1 ? 'btn cur' : 'btn'}">问问专家</a>
					</div>
				</div>
				<span><!-- <p class="refresh-tip">为你推荐了8篇文章</p> --></span>
				<div>
					<content id="pageletListContent" class="feed-list-container">
						<div class="list_content" id="listUl">
							
						</div>
					</content>
				</div>
			</div>
		</div>
	
	</div>	
<script type="text/html" id="qqwww">
	<!-- 有视频 -->
	{{# if(d.videoUrl != null && d.videoUrl != '' ){ }}
		<section class="middle_mode has_action">
			<a href="javascript: void(0)" lay-event="goto" class="article_link clearfix">
				<div class="item_detail desc">
					<h3 class="dotdot line3 image-margin-right">{{d.title}}</h3>
					<div class="item_info">
						<div>
							<span class="src space">{{d.user.nickName}}</span>
							<span class="cmt space">{{d.readSizeFormat}}阅读</span>
							<span class="cmt space">{{d.commentNum}}评论</span>
							<span class="time" title="{{d.time}}">{{d.time}}</span>
							<span class="dislike-news fr mid-space"></span>
						</div>
					</div>
				</div>
				<div class="list_img_holder">
					<img src="{{d.coverVideo}}">
					<span class="video-btn"></span>
				</div>
			</a>
		</section>
	{{# } else { }}
		{{# if(d.imgs.length < 2 ){ }}
			{{# if(d.coverImage != '' ){ }}
				<section class="middle_mode has_action">
					<a href="javascript: void(0)" lay-event="goto" class="article_link clearfix">
						<div class="item_detail desc">
							<h3 class="dotdot line3 image-margin-right">{{d.title}}</h3>
							<div class="item_info">
								<div>
									<span class="src space">{{d.user.nickName}}</span>
									<span class="cmt space">{{d.readSizeFormat}}阅读</span>
									<span class="cmt space">{{d.commentNum}}评论</span>
									<span class="time" title="{{d.time}}">{{d.time}}</span>
									<span class="dislike-news fr mid-space"></span>
								</div>
							</div>
						</div>
						<div class="list_img_holder">
							<img src="{{d.coverImage}}">
						</div>
					</a>
				</section>
			{{# } else { }}
				<section class="has_action">
					<a href="javascript: void(0)" lay-event="goto" class="article_link clearfix">
						<div class="item_detail">
							<h3 class="dotdot line3">{{d.title}}</h3>
							<div class="item_info">
								<div>
									<span class="src space">{{d.user.nickName}}</span>
									<span class="cmt space">{{d.readSizeFormat}}阅读</span>
									<span class="cmt space">{{d.commentNum}}评论</span>
									<span class="time" title="{{d.time}}">{{d.time}}</span>
									<span class="dislike-news fr"></span>
								</div>
							</div>
						</div>
					</a>
				</section>
			{{#  } }}
		{{# } else { }}
			<section class="has_action">
				<a href="javascript: void(0)" lay-event="goto" class="article_link clearfix">
					<div class="item_detail">
						<h3 class="dotdot line3">{{d.title}}</h3>
						<div class="list_image">
							<ul class="clearfix">
								{{# layui.each(d.imgs, function(index, item){ }}
									{{# if(index < 3 ){ }}
										<li class="list_img_holder">
											<img src="{{item}}">
										</li>
									{{#  } }}
								{{# }); }}
							</ul>
						</div>
						<div class="item_info">
							<div>
								<span class="src space">{{d.user.nickName}}</span>
								<span class="cmt space">{{d.readSizeFormat}}阅读</span>
								<span class="cmt space">{{d.commentNum}}评论</span>
								<span class="time" title="{{d.time}}">{{d.time}}</span>
								<span class="dislike-news fr"></span>
							</div>
						</div>
					</div>
				</a>
			</section>
		{{#  } }}
	{{#  } }}

</script>	

<script type="text/javascript">
layui.use(['layer', 'form', 'formX', 'setter', 'mynotice', 'admin', 'ax', 'util', 'dataGrid', 'element'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var formX = layui.formX;
    var setter = layui.setter;
    var mynotice = layui.mynotice;
    var admin = layui.admin;
    var $ax = layui.ax;
    var util = layui.util;
    var dataGrid = layui.dataGrid;
    var element = layui.element;
    
    dataGrid.render({
        elem: '#listUl',  // 容器
        templet: '#qqwww',  // 模板
        url: '/loadmore/h5/column/' + $('#colId').val(),  // 数据接口
        loadMore: {limit: 10},  // 开启分页
        done: function(res, curr, count){
        	
        }
    });  
    
    /* item里面的lay-event的点击事件 */
    dataGrid.on('tool(listUl)', function (obj) {
        var data = obj.data;
        if (obj.event === 'goto') {
        	window.location.href = '/details/' + data.articleId;
        } 
    });
	
});

</script>

</body>
</html>